<template>
    <div>
        <div class="text-box" @click="handleClick">
            {{text}}
        </div>
        <!--对话框显示-->
        <t-modal title="超链接页面" :width="'1000px'" :visible="visible" :switchFullscreen="false" @ok="ok" @cancel="cancel">
            <iframe :src="url" style="width: 100%;height: 500px;" frameborder="no"></iframe>
        </t-modal>
    </div>
</template>

<script>
  export default {
    name: "Hyperlink",
    props: {
      text: {
        type: String,
        default: "超链接"
      },
      url: {
        type: String,
        default: ""
      },
      showType: {
        type: String,
        default: "other"
      }
    },
    data() {
      return {
        visible: false,
      };
    },
    watch: {},
    methods: {
      ok() {
        this.visible = false
      },
      cancel() {
        this.visible = false
      },
      handleClick() {
        if (this.url) {
          if (this.showType == 'modal') {
            //弹窗式
            this.visible = true
          }else{
            //内嵌式
            const that = this;
            this.$confirm({
              title: "提示",
              content: "当前页面未保存的数据将丢失，确定要跳转页面吗？",
              okText: "确定",
              cancelText: "取消",
              closable: true,
              icon: () => that.$createElement('a-icon', {
                props: {
                  key: 'info',
                  type: 'info-circle',
                  twoToneColor: '#1890ff'
                }
              }),
              onOk() {
                that.$router.push({
                  path: "/other/index/?url=" + that.url,
                });
              }
            })
          }
        } else {
          //弹出警告
          this.$message.warning('链接地址为空！')
        }
      },

    }
  };
</script>

<style scoped>
  .text-box {
    color: #1890ff;
    line-height: 1.499;
    position: relative;
    display: inline-block;
    font-weight: 400;
    padding: 0 15px;
  }
</style>
